<!--/********************
 * 摘要：运费设置页面
 * 软件名称：北京闪酿APP
 * 文件名: yunfei.vue
 * 版本：1.0.0.0
 * ******************/-->
<template>
	<view>
		<u-navbar :border-bottom="false" title="运费设置" :title-size="36" :title-bold="true" :title-color="textColor" :background="{backgroundColor: bgColor}">
		</u-navbar>
		<!-- <u-cell-group :border="false">
			<u-cell-item title="计量单位" :arrow="false" :border-bottom="false" hover-class="none">
				<view slot="right-icon">
					<ak-switch :switchList="['元', '瓶']" :width="225" :height="60"></ak-switch>
				</view>
			</u-cell-item>
		</u-cell-group> -->
		<view v-for="(item, index) in levelList" :key="index">
			<view class="u-m-t-30 u-m-b-30 u-p-l-35">
				<text class="u-font-32 text-bold">{{ item.name }}</text>
			</view>
			<view class="box-color box-padding u-m-b-20">
				<u-checkbox
					shape="circle"
					@change="checkboxChange"
					v-model="item.base"
					:active-color="themeColor"
					name="baseValue"
					:label-disabled="false"
				>
					<view class="u-flex u-row-between">
						<view class="u-flex-col u-row-between">
							<text class="u-font-30">起购金额</text>
							<text class="u-font-22 grey-color">满足条件允许买家下单，运费买家承担</text>
						</view>
						<view class="u-flex u-row-right" style="text-align: right;">
							<input v-if="item.base" type="number" v-model="item.baseValue" style="width: 130rpx;height:60rpx;border-radius: 5px;border: 1rpx solid #333333;text-align: center;" :auto-blur="true" @click.stop>
							<view v-else style="width: 130rpx;height: 60rpx;width: 130rpx;height:60rpx;border-radius: 5px;background-color: #EEEEEE;" @click.stop></view>
							<text class="u-m-l-20">元</text>
						</view>
					</view>
				</u-checkbox>
			</view>
			<view class="box-color box-padding u-m-b-20">
				<u-checkbox
					shape="circle"
					@change="checkboxChange"
					v-model="item.shipping"
					:active-color="themeColor"
					name="freeShippingValue"
					:label-disabled="false"
				>
					<view class="u-flex u-row-between">
						<view class="u-flex-col u-row-between">
							<text class="u-font-30">包邮金额</text>
							<text class="u-font-22 grey-color">满足条件运费卖家承担，不送货上门</text>
						</view>
						<view class="u-flex u-row-right" style="text-align: right;">
							<input v-if="item.shipping" type="number" v-model="item.freeShippingValue" style="width: 130rpx;height:60rpx;border-radius: 5px;border: 1rpx solid #333333;text-align: center;" :auto-blur="true" @click.stop>
							<view v-else style="width: 130rpx;height: 60rpx;width: 130rpx;height:60rpx;border-radius: 5px;background-color: #EEEEEE;" @click.stop></view>
							<text class="u-m-l-20">元</text>
						</view>
					</view>
				</u-checkbox>
			</view>
			<view class="box-color box-padding u-m-b-20">
				<u-checkbox
					shape="circle"
					@change="checkboxChange"
					v-model="item.delivery"
					:active-color="themeColor"
					name="freeDeliveryValue"
					:label-disabled="false"
				>
					<view class="u-flex u-row-between">
						<view class="u-flex-col u-row-between">
							<text class="u-font-30">包送金额</text>
							<text class="u-font-22 grey-color">满足条件运费卖家承担且送货上门</text>
						</view>
						<view class="u-flex u-row-right" style="text-align: right;">
							<input v-if="item.delivery" type="number" v-model="item.freeDeliveryValue" style="width: 130rpx;height:60rpx;border-radius: 5px;border: 1rpx solid #333333;text-align: center;" :auto-blur="true" @click.stop>
							<view v-else style="width: 130rpx;height: 60rpx;width: 130rpx;height:60rpx;border-radius: 5px;background-color: #EEEEEE;" @click.stop></view>
							<text class="u-m-l-20">元</text>
						</view>
					</view>
				</u-checkbox>
			</view>
		</view>
		<view style="padding: 0 35rpx 100rpx 35rpx;margin-top: 100rpx;">
			<u-button shape="circle" :ripple="true" hover-class="none" :hair-line="false" :custom-style="getBtStyle('default')" @click="handlSubmit">保存</u-button>
		</view>
		
	</view>
</template>

<script>
	import AkSwitch from '@/components/ak-switch/index.vue';
	import { useShopStore } from '@/store/shop.js';
	import { mapState } from 'pinia';
	export default {
		components: { AkSwitch },
		data() {
			return {
				levelList: []
			}
		},
		onLoad() {
			this.getList()
		},
		computed:{
			...mapState(useShopStore, {storeShop: 'shop'})
		},
		methods: {
			async getList() {
				const res = await this.$http.get('api/PostFeeSetting/GetPostFee', { params: { shopId: this.storeShop.id } })
				for (let i = 0; i < res.length; i++) {
					res[i].base = false
					res[i].shipping = false
					res[i].delivery = false
					if (res[i].baseValue) res[i].base = true
					if (res[i].freeShippingValue) res[i].shipping = true
					if (res[i].freeDeliveryValue) res[i].delivery = true
				}
				this.levelList = res
				console.log(this.levelList)
			},
			checkboxChange(e) {
				console.log(e)
			},
			async handlSubmit() {
				let list = this.levelList
				for (let i = 0; i < list.length; i++) {
					list[i].shopLevelId = list[i].id
					delete list[i].id
					if (!list[i].base) list[i].baseValue = null
					if (!list[i].shipping) list[i].freeShippingValue = null
					if (!list[i].delivery) list[i].freeDeliveryValue = null
				}
				const data = {
					shopId: this.storeShop.id,
					settingPostFees: list
				}
				const res = await this.$http.post('api/PostFeeSetting/SettingPostFee', data)
				this.$u.toast('保存成功', 1000, 'success')
				this.$mHelper.delayedJump()
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-input-input{
		font-size: 30rpx;
	}
	::v-deep .u-checkbox {
		width: 100%;
	}
	::v-deep .u-checkbox__label {
		margin-left: 20rpx;
		width: 100%;
		margin-right: 0;
	}
</style>
